<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>浮动</title>

        <style>
            .outerDiv{
                width: 500px;
                height: 300px;
                background-color: antiquewhite;
                color: rgb(230, 73, 16);
                font-weight: bold;
                font-size: 25px;
                font-family: serif;
                border: 1px solid black;
                margin: 0px auto;
            }

            .innerDiv{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /* display: 元素的展现方式 block: 块元素 inline: 行内元素 将块元素转化为行内元素后 它的宽高等属性可能会失效 */
                /* display: inline; */
            }
        </style>
    </head>
    <body>
        <div class="outerDiv">
            <!-- 
                当 div1 设置为向左浮动时会先脱离文档流 即不占据位置
                此时 div2 和 div3 就会向上浮动 分别占据原本 div1 和 div2 的位置
                然后 div1 向左浮动覆盖住 占据 div1 位置的 div2
                因为浮动会解决文字覆盖的问题 所以 div2 上的文字会被挤到别的地方去 这个地方就是 占据 div位置 的 div3

                如果
            -->
            <div class="innerDiv" style="background-color: rgb(77, 148, 148); float: left;">div1</div>
            <div class="innerDiv" style="background-color: rgb(127, 88, 163); float: left;">div2</div>
            <div class="innerDiv" style="background-color: rgb(137, 75, 75); float: left;">div3</div>
        </div>
    </body>
</html>
